<template>
    <div class="user-withdrawal rocket-content">
        <div class="rocket-input-wrap">
            <span class="rocket-label-name">日期</span>
            <el-date-picker
                @change="getList(1)"
                style="width: 300px;"
                v-model="date"
                type="daterange"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
            </el-date-picker>
            <span class="rocket-label-name mar-lt">提现类型</span>
            <el-select @change="loginChange" style="width:150px;" v-model="loginChangeVal">
                <el-option label="全部" value=""></el-option>
                <el-option label="已注册" :value="0"></el-option>
                <el-option label="未注册" :value="1"></el-option>
            </el-select>
            <el-button type="primary" class="btn mar-lt">导出</el-button>
        </div>

        <div class="table-box">
            <el-table
                :data="list"
                border
                @sort-change="sortChange"
                style="width: 100%">
                <el-table-column
                    prop="userId"
                    label="日期">
                    <template slot-scope="scope">
                        <div @click="goUserDetail(scope.row.userId)" class="link-btn">{{scope.row.userId}}</div>
                    </template>
                </el-table-column>
                <el-table-column
                    label="提现方式">
                    <template slot-scope="scope">
                        <span>{{scope.row.nickname || '-'}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    label="提现金额">
                    <template slot-scope="scope">
                        <span>{{scope.row.nickname || '-'}}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="mar-tp">
            <el-pagination
                @size-change="sizeChange"
                @current-change="pageChange"
                :current-page="pageNum"
                :page-sizes="_pageSizes"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            loading: false,
            list: [],
            pageNum: 1,
            pageSize: this._pageSize,
            total: 0,
            keyword: '',
            date: [],
            loginChangeVal: null,
            userSourceVal: null,
            userStatusVal: null
        }
    },

    created() {
        this.getList(1)
    },

    mounted () {
    },

    methods: {
        // 查看用户详情
        goUserDetail (id) {
            const { href } = this.$router.resolve({
                path: `/rocket/userDetail`,
                query: {
                    id
                }
            })
            window.open(href, '_blank')
        },
        loginChange(val) {
            this.loginChangeVal = val
            this.getList(1)
        },
        async getList (num, flag) {
            if (this.loading) return
            this.loading = true
            this.pageNum = num

            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                loginType: this.loginChangeVal,
                status: this.statusChangeVal,
                roleStatus: this.roleChangeVal,
            }

            // if (this.type) params.type = this.type
            // if (this.sort) params.sort = this.sort

            if (this.date && this.date.length) {
                params.fromDate = this.date[0]
                params.toDate = this.date[1]
            }

            if (this.keyword) {
                params.keyword = this.keyword
            }
            let res = await this.$http.get('/data/selectUserDetailData', {
                params
            })
            if (res.code === '0') {
                res.data && res.data.forEach(item => {
                    item.userJoinTimesVoList = item.userJoinTimesVoList || []
                })
                this.list = res.data
                this.total = res.count

            } else {
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
            this.loading = false
        },

        sizeChange (val) {
            this.pageSize = val
            this.getList(1)
        },

        pageChange (val) {
            this.getList(val)
        },

        // 后端排序
        sortChange ({ column, prop, order }) {
            console.log(prop, '000000')
            this.sort = order || ''
            // 如果没有 sort prop 置为空
            if (!this.sort) {
                this.type = null
            } else {
                if (this.sort === 'ascending') {
                    this.sort = 'asc'
                } else {
                    this.sort = 'desc'
                }
                this.type = prop
            }
            this.getList(1)
        }
    }
}
</script>

<style lang="scss">
.user-withdrawal {

}
</style>
